<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="任务名称">
        <el-input v-model="formInline.jobName" placeholder="任务名称"></el-input>
      </el-form-item>
      <el-form-item label="请选择任务组名">
        <el-select v-model="formInline.jobGroup" placeholder="请选择任务组名">
          <el-option v-for="t in group" :label="t.dictLabel" :value="t.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择任务状态">
        <el-select v-model="formInline.status" placeholder="请选择任务状态">
          <el-option v-for="t in statuss" :label="t.dictLabel" :value="t.dictValue"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="init">查询</el-button>
      </el-form-item>
    </el-form>
    <!--按钮-->
    <el-row>
      <el-col :span="1.5">
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="openadd">新增</el-button>
        <el-button type="success" icon="el-icon-edit" size="mini" @click="openup">修改</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="del">删除</el-button>
        <el-button type="warning" icon="el-icon-download" size="mini" @click="execl">导出</el-button>
        <el-button type="info" icon="el-icon-s-operation" size="mini" @click="goLog">日志</el-button>
      </el-col>
    </el-row>
    <!--新增-->
    <el-dialog title="定时任务" :visible.sync="dialogFormVisible">
      <el-form :model="addform" :rules="rules" ref="addform" class="demo-ruleForm">
        <el-form-item label="任务名称" prop="jobName" :label-width="formLabelWidth">
          <el-input v-model="addform.jobName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="任务分组" :label-width="formLabelWidth">
          <el-select v-model="addform.jobGroup" placeholder="请选择任务组名">
            <el-option v-for="t in group" :label="t.dictLabel" :value="t.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调用方法" prop="invokeTarget" :label-width="formLabelWidth">
          <el-input v-model="addform.invokeTarget" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="cron表达式" prop="cronExpression" :label-width="formLabelWidth">
          <el-input v-model="addform.cronExpression" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否并发" :label-width="formLabelWidth">
          <el-radio-group v-model="addform.concurrent">
            <el-radio-button label="0">允许</el-radio-button>
            <el-radio-button label="1">禁止</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="错误策略" :label-width="formLabelWidth">
          <el-radio-group v-model="addform.misfirePolicy">
            <el-radio-button label="1">立即执行</el-radio-button>
            <el-radio-button label="2">执行一次</el-radio-button>
            <el-radio-button label="3">放弃执行</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio-group v-model="addform.status">
            <el-radio v-for="t in statuss" :label="t.dictValue">{{ t.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('addform')">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改-->
    <el-dialog title="定时任务" :visible.sync="dialogFormVisible1">
      <el-form :model="updateform" :rules="rules" ref="updateform" class="demo-ruleForm">
        <el-form-item label="任务名称" prop="jobName" :label-width="formLabelWidth">
          <el-input v-model="updateform.jobName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="任务分组" :label-width="formLabelWidth">
          <el-select v-model="updateform.jobGroup" placeholder="请选择任务组名">
            <el-option v-for="t in group" :label="t.dictLabel" :value="t.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调用方法" prop="invokeTarget" :label-width="formLabelWidth">
          <el-input v-model="updateform.invokeTarget" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="cron表达式" prop="cronExpression" :label-width="formLabelWidth">
          <el-input v-model="updateform.cronExpression" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否并发" :label-width="formLabelWidth">
          <el-radio-group v-model="updateform.concurrent">
            <el-radio-button label="0">允许</el-radio-button>
            <el-radio-button label="1">禁止</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="错误策略" :label-width="formLabelWidth">
          <el-radio-group v-model="updateform.misfirePolicy">
            <el-radio-button label="1">立即执行</el-radio-button>
            <el-radio-button label="2">执行一次</el-radio-button>
            <el-radio-button label="3">放弃执行</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio-group v-model="updateform.status">
            <el-radio v-for="t in statuss" :label="t.dictValue">{{ t.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="up('updateform')">确 定</el-button>
      </div>
    </el-dialog>

    <!--    详情-->
    <el-dialog title="任务详情" :visible.sync="dialogFormVisible2" append-to-body>
      <el-form :model="xqform" :label-width="formLabelWidth">
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务编号">{{xqform.jobId}}</el-form-item>
            <el-form-item label="任务名称">{{xqform.jobName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务分组">{{xqform.jobGroup}}</el-form-item>
            <el-form-item label="任务时间">{{xqform.createTime}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="cron表达式">{{xqform.cronExpression}}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="调用目标方法">{{ xqform.invokeTarget }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务状态">
              <div v-if="xqform.status==0">正常</div>
              <div v-else-if="xqform.status==1">失败</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否并发">
              <div v-if="xqform.concurrent==0">允许</div>
              <div v-else-if="xqform.concurrent==1">禁止</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行策略">
              <div v-if="xqform.misfirePolicy==0">默认策略</div>
              <div v-else-if="xqform.misfirePolicy==1">立即执行</div>
              <div v-else-if="xqform.misfirePolicy==2">执行一次</div>
              <div v-else-if="xqform.misfirePolicy==3">放弃执行</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">关闭</el-button>
      </div>
    </el-dialog>


    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="jobId"
          label="编号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="jobName"
          label="任务名称"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="jobGroup"
          label="任务组名"
          show-overflow-tooltip>
        <template v-slot="scope">
          {{ scope.row.jobGroup == 'DEFAULT' ? "默认" : "系统" }}
        </template>
      </el-table-column>
      <el-table-column
          prop="invokeTarget"
          label="调用目标字符串"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="cronExpression"
          label="cron执行表达式"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          show-overflow-tooltip>
        <template v-slot="scope">
          <el-switch
              v-model="scope.row.status"
              active-value="0"
              inactive-value="1"
              @change="upstatus(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="150">
        <template slot-scope="scope">
          <el-button @click="Implementation(scope.row)" type="text" size="small">立即执行一次</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @current-change="gopage"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>

  </div>


</template>

<script>
export default {
  name: "QuartzView",
  data() {
    return {
      formLabelWidth: '120px',
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      addform: {
        concurrent: 1,
        misfirePolicy: 1,
      },
      updateform: {},
      tableData: [],
      formInline: {},
      size: 3,
      current: 1,
      total: 0,
      type1: 'sys_job_status',
      type2: 'sys_job_group',
      statuss: [],
      group: [],
      upid: '',
      upfrom: {},
      xqform: {},
      rules: {
        jobName: [
          {required: true, message: '请输入任务名称', trigger: 'blur'},
        ], invokeTarget: [
          {required: true, message: '请输入任务名称', trigger: 'blur'},
        ], cronExpression: [
          {required: true, message: '请输入任务名称', trigger: 'blur'},
        ]
      }
    }
  }, created() {
    this.init();
    this.getGroup(this.type2)
    this.getStatus(this.type1)
  }, methods: {
    //执行
    Implementation(row) {
      this.$confirm("确定要执行一次" + row.jobName + "任务吗?", "警告", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post("job/job/run", row).then(res => {
          if (res.data.code == 200) {
            this.$message.success("执行成功");
            this.init();
          }
        })
      }).catch(function () {

      })
    },
    //详情
    handleClick(row) {
      this.dialogFormVisible2 = true;
      this.xqform = row;
    },
    //跳转日志
    goLog(){
      this.$router.push("/log")
    },
    //导出
    execl() {
      this.$confirm("确定要导出任务列表吗?", "警告", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.get("job/job/execl", {
          params: {
            jobName: this.formInline.jobName,
            jobGroup: this.formInline.jobGroup,
            status: this.formInline.status,
          }
        }).then(res => {
          this.$message.success("导出成功")
        })
      }).catch(function () {

      })
    },
    //分页
    gopage(page) {
      this.current = page;
      this.init();
    },
    //删除
    del() {
      if (this.upid=='') {
        this.$message.error("请选择要修改的任务")
      }else {
        this.$confirm("确定要删除任务吗?", "警告", {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.get("job/job/del", {
            params: {
              id: this.upid,
            }
          }).then(res => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.init();
            } else {
              this.$message.error("删除失败");
            }
          })
        }).catch(function () {

        })
      }
    },
    //新增
    add(formName) {
      let username = localStorage.getItem("username");
      this.addform.createBy=username;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("job/job/add", this.addform).then(res => {
            if (res.data.code == 200) {
              this.$message.success("新增成功")
              this.dialogFormVisible = false;
              this.init();
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //修改
    up(formName) {
      let username = localStorage.getItem("username");
      this.updateform.updateBy=username;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.updateform)
          this.axios.post("job/job/updateJob", this.updateform).then(res => {
            if (res.data.code == 200) {
              this.$message.success("修改成功")
              this.dialogFormVisible1 = false;
              this.init();
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //根据id获取
    getupbyId() {
      console.log(this.upid)
      this.axios.get("job/job/getupbyId", {
        params: {
          id: this.upid,
        }
      }).then(res => {
        this.updateform = res.data.list;
      })
    },
    //打开修改对话框
    openup() {
      this.updateform = {}
      if (this.upid == '') {
        this.$message.error("请选择要修改的任务");
      } else {
        this.dialogFormVisible1 = true;
      }
      this.getupbyId();
      //updateJob
    },
    //打开新增对话框
    openadd() {
      this.dialogFormVisible = true;
      this.getGroup(this.type2)
      this.getStatus(this.type1)
    },
    //修改状态
    upstatus(row) {
      let text = row.status == 0 ? '启用' : '禁用';
      this.$confirm("确定要" + text + "任务吗?", "警告", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row.jobId)
        this.axios.post("job/job/upstatus", row).then(res => {
          this.$message.success(text + "成功")
        })
      }).catch(function () {
        //取消后不变
        row.status = row.status == 0 ? "1" : "0";
      })
    },
    //获取选中数据的id
    handleSelectionChange(val) {
      this.upid = val.map(v => v.jobId).join(",");
    },
    //列表
    init() {
      this.axios.get("job/job/list", {
        params: {
          size: this.size,
          current: this.current,
          jobName: this.formInline.jobName,
          jobGroup: this.formInline.jobGroup,
          status: this.formInline.status,
        }
      }).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },
    //获取分组
    getGroup(type1) {
      console.log(type1)
      this.axios.get("job/job/getGroup", {
        params: {
          status: type1,
        }
      }).then(res => {
        this.group = res.data.list;
      })
    },
    //获取状态
    getStatus(type1) {
      this.axios.get("job/job/getStatus", {
        params: {
          status: type1,
        }
      }).then(res => {
        this.statuss = res.data.list;
      })
    }
  }
}
</script>

<style scoped>

</style>